<template>
  <div
    v-loading="mainLoading"
    class="wx-voice-div"
    @click="outTime ? '' : playVoice(objData)"
  >
    <i v-if="!outTime" :class="objData.amrPlaying != true ? 'icon-yuyin' : 'icon-playing1'">
      <span v-if="objData.amrDuration" class="amr-duration">{{ objData.amrDuration }}</span>
    </i>
    <i v-if="outTime" class="el-icon-time">
      <span class="amr-duration">该语音已过期</span>
    </i>
    <div v-if="objData.repContent">
      <el-tag type="success" size="mini">语音识别</el-tag>
      {{ objData.repContent }}
    </div>
  </div>
</template>

<script>
import { downloadDraftVideoSource, downloadPublishedVideoSource } from '@/api/wxMp'
const BenzAMRRecorder = require('benz-amr-recorder')

export default {
  props: {
    objData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      outTime: false,
      mainLoading: false
    }
  },
  computed: {},
  created() {
    this.outTime =
      this.objData.type === '1' &&
      parseInt(
        new Date().getTime() - new Date(this.objData.createTime).getTime()
      ) >= 259200000
  },
  mounted() {},
  methods: {
    amrPlay(amr, val) {
      this.$set(val, 'amrPlaying', true)
      amr.play()
    },
    amrStop(amr, val) {
      this.$set(val, 'amrPlaying', false)
      amr.stop()
    },
    playVoice(val) {
      const amr = val.amr
      if (amr === undefined) {
        if (val.type === '2') {
          this.$set(val, 'repUrl', this.objData.url)
          this.handleAudio(val)
          // this.getMaterialOther(val.repMediaId, val.repName).then((url) => {
          // })
        } else if (val.type === '1') {
          this.downloadDraftVideo(val.repMediaId, val.repName).then((url) => {
            this.$set(val, 'repUrl', url)
            this.handleAudio(val)
          })
        }
      } else {
        if (amr.isPlaying()) {
          this.amrStop(amr, val)
        } else {
          this.amrPlay(amr, val)
        }
      }
    },
    async downloadDraftVideo(repMediaId, fileName) {
      let url
      this.mainLoading = true
      await downloadDraftVideoSource({
        mediaId: repMediaId,
        fileName: fileName
      })
        .then((response) => {
          this.mainLoading = false
          url = window.URL.createObjectURL(new Blob([response.data]))
        })
        .catch(() => {
          this.mainLoading = false
        })
      return url
    },
    async downloadPublishedVideo(repMediaId, fileName) {
      let url
      this.mainLoading = true
      await downloadPublishedVideoSource({
        mediaId: repMediaId,
        fileName: fileName
      })
        .then((response) => {
          this.mainLoading = false
          url = window.URL.createObjectURL(new Blob([response.data]))
        })
        .catch(() => {
          this.mainLoading = false
        })
      return url
    },
    handleAudio(val) {
      this.$set(val, 'amr', new BenzAMRRecorder())
      const amr = val.amr
      const that = this
      amr.initWithUrl(val.repUrl).then(function() {
        that.amrPlay(amr, val)
        that.$set(val, 'amrDuration', amr.getDuration())
      })
      amr.onEnded(function() {
        that.$set(val, 'amrPlaying', false) // 播放完了
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wx-voice-div {
  padding: 5px;
  background-color: #eaeaea;
  border-radius: 10px;
}
.amr-duration {
  font-size: 11px;
  margin-left: 5px;
}
</style>
